<template>
  <view class="app-container">
    <!-- 主内容区域 -->
    <view class="main-content">
      <!-- 首页 -->
      <view v-if="currentTab === 0" class="home-page">
        <!-- 预览区域 -->
        <view class="preview-section">
          <view class="preview-card">
            <view class="color-preview">
              <view
                v-for="(color, index) in currentColors"
                :key="index"
                class="color-block"
                :style="{ backgroundColor: color }"
              ></view>
            </view>
            <view class="color-info">
              <text class="color-title">当前配色方案</text>
              <view class="color-values">
                <text
                  v-for="(color, index) in currentColors"
                  :key="index"
                  class="color-value"
                  >{{ color }}</text
                >
              </view>
            </view>
          </view>
        </view>

        <!-- 调色板选择区 -->
        <view class="palette-section">
          <text class="section-title">调色板</text>
          <scroll-view scroll-x class="palette-scroll">
            <view class="palette-list">
              <view
                v-for="(palette, index) in colorPalettes"
                :key="index"
                class="palette-item cursor-pointer"
                :class="{ active: selectedPalette === index }"
                @click="selectPalette(index)"
              >
                <view class="palette-colors">
                  <view
                    v-for="(color, colorIndex) in palette.colors"
                    :key="colorIndex"
                    class="mini-color-block"
                    :style="{ backgroundColor: color }"
                  ></view>
                </view>
                <text class="palette-name">{{ palette.name }}</text>
              </view>
            </view>
          </scroll-view>
        </view>

        <!-- 颜色编辑区 -->
        <view class="editor-section">
          <text class="section-title">颜色编辑</text>
          <view class="editor-card">
            <view class="current-color-display">
              <view
                class="current-color-block"
                :style="{ backgroundColor: editingColor }"
              ></view>
              <view class="color-input-group">
                <text class="color-label">HEX:</text>
                <input
                  class="color-input"
                  v-model="editingColorHex"
                  @input="updateColorFromHex"
                  placeholder="#FF6B6B"
                />
              </view>
            </view>
            <view class="sliders">
              <!-- <view class="slider-group">
                <text class="slider-label">色相</text>
                <slider
                  class="color-slider"
                  :value="hue"
                  @change="updateHue"
                  max="360"
                  activeColor="#8B4513"
                />
              </view> -->
              <view class="slider-group">
                <text class="slider-label">饱和度</text>
                <slider
                  class="color-slider"
                  :value="saturation"
                  @change="updateSaturation"
                  max="100"
                  activeColor="#8B4513"
                />
              </view>
              <view class="slider-group">
                <text class="slider-label">明度</text>
                <slider
                  class="color-slider"
                  :value="lightness"
                  @change="updateLightness"
                  max="100"
                  activeColor="#8B4513"
                />
              </view>
            </view>
          </view>
        </view>

        <!-- 底部操作栏 -->
        <view class="action-bar">
          <button
            class="action-btn save-btn cursor-pointer"
            @click="saveScheme"
          >
            <uni-icons
              type="heart-filled"
              size="18"
              color="#FFFFFF"
            ></uni-icons>
            <text class="btn-text">保存方案</text>
          </button>
          <button
            class="action-btn random-btn cursor-pointer"
            @click="randomColors"
          >
            <uni-icons
              type="refreshempty"
              size="18"
              color="#8B4513"
            ></uni-icons>
            <text class="btn-text">随机搭配</text>
          </button>
          <button
            class="action-btn clear-btn cursor-pointer"
            @click="clearColors"
          >
            <uni-icons type="clear" size="18" color="#666666"></uni-icons>
            <text class="btn-text">清空</text>
          </button>
        </view>
      </view>

      <!-- 搭配记录页面 -->
      <view v-if="currentTab === 1" class="record-page">
        <view class="page-header">
          <text class="page-title">我的搭配</text>
          <text class="record-count">共{{ savedSchemes.length }}个方案</text>
        </view>

        <scroll-view
          scroll-y
          class="record-list"
          v-if="savedSchemes.length > 0"
        >
          <view class="record-grid">
            <view
              v-for="(scheme, index) in savedSchemes"
              :key="index"
              class="record-item cursor-pointer"
              @click="loadScheme(scheme)"
              @longpress="deleteScheme(index)"
            >
              <view class="record-colors">
                <view
                  v-for="(color, colorIndex) in scheme.colors"
                  :key="colorIndex"
                  class="record-color-block"
                  :style="{ backgroundColor: color }"
                ></view>
              </view>
              <view class="record-info">
                <text class="record-name">{{ scheme.name }}</text>
                <text class="record-time">{{ scheme.createTime }}</text>
              </view>
            </view>
          </view>
        </scroll-view>

        <view v-else class="empty-state">
          <uni-icons type="color" size="60" color="#CCCCCC"></uni-icons>
          <text class="empty-text">暂无保存的配色方案</text>
          <text class="empty-tip">去首页创建你的第一个配色方案吧</text>
        </view>
      </view>

      <!-- 幸运色页面 -->
      <view v-if="currentTab === 2" class="lucky-page">
        <view class="lucky-header">
          <uni-icons type="star" size="60" color="#FFD700"></uni-icons>
          <text class="lucky-title">测测我的今日幸运色</text>
        </view>
        <view class="lucky-color-section">
          <view class="lucky-color-block" :style="{ backgroundColor: luckyColor.hex }"></view>
          <text class="lucky-color-hex">{{ luckyColor.hex }}</text>
          <text class="lucky-color-desc">{{ luckyColor.desc }}</text>
        </view>
        <button class="lucky-refresh-btn" @click="generateLuckyColor">重新测一测</button>
        <button class="lucky-scheme-btn" @click="generateLuckyScheme">生成幸运配色方案</button>
      </view>
      <!-- 我的页面 -->
      <view v-if="currentTab === 3" class="profile-page">
        <view class="profile-header">
          <view class="avatar-section">
            <image
              class="avatar"
              src="https://readdy.ai/api/search-image?query=Cute%20cartoon%20bear%20avatar%2C%20friendly%20brown%20teddy%20bear%20character%2C%20simple%20minimalist%20design%2C%20warm%20and%20inviting%20expression%2C%20soft%20rounded%20features%2C%20isolated%20on%20white%20background%2C%20centered%20composition%2C%203D%20rendered%20style%2C%20high%20quality%20details&width=120&height=120&seq=bear-avatar-001&orientation=squarish"
              mode="aspectFill"
            />
            <text class="username">熊熊配色师</text>
          </view>
        </view>

        <view class="profile-content">
          <view class="stats-section">
            <view class="stat-item">
              <text class="stat-number">{{ savedSchemes.length }}</text>
              <text class="stat-label">配色方案</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">{{ colorPalettes.length }}</text>
              <text class="stat-label">调色板</text>
            </view>
            <view class="stat-item">
              <text class="stat-number">{{ usageDays }}</text>
              <text class="stat-label">使用天数</text>
            </view>
          </view>

          <view class="menu-section">
            <view class="menu-item cursor-pointer" @click="clearCache">
              <view class="menu-left">
                <uni-icons type="trash" size="20" color="#8B4513"></uni-icons>
                <text class="menu-text">清空缓存</text>
              </view>
              <view class="menu-right">
                <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
              </view>
            </view>

            <view class="menu-item cursor-pointer" @click="showHelp">
              <view class="menu-left">
                <uni-icons type="help" size="20" color="#8B4513"></uni-icons>
                <text class="menu-text">使用帮助</text>
              </view>
              <view class="menu-right">
                <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
              </view>
            </view>

            <view class="menu-item cursor-pointer" @click="showAbout">
              <view class="menu-left">
                <uni-icons type="info" size="20" color="#8B4513"></uni-icons>
                <text class="menu-text">隐私政策</text>
              </view>
              <view class="menu-right">
                <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
              </view>
            </view>
            <view class="menu-item cursor-pointer" @click="showServiceAgreement">
              <view class="menu-left">
                <uni-icons type="compose" size="20" color="#8B4513"></uni-icons>
                <text class="menu-text">用户协议</text>
              </view>
              <view class="menu-right">
                <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部标签栏 -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab-item cursor-pointer"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <uni-icons
          :type="tab.icon"
          :size="24"
          :color="currentTab === index ? '#8B4513' : '#999999'"
        ></uni-icons>
        <text class="tab-text" :class="{ active: currentTab === index }"
          >{{ tab.name }}</text
        >
      </view>
    </view>

    <!-- 自定义隐私政策弹窗 -->
    <view v-if="showPrivacyModal" class="custom-modal-mask">
      <view class="custom-modal" style="padding: 0;">
        <view style="padding: 24px 18px 0 18px;">
          <view class="custom-modal-title" style="font-size:20px;margin-bottom:12px;text-align:center;">用户协议和隐私政策</view>
          <view class="custom-modal-content" style="font-size:15px;color:#222;line-height:1.7;text-align:left;margin-bottom:0;">
            请你务必审慎阅读、充分理解“用户协议”和“隐私政策”各条款，包括但不限于：为了更好的向你提供服务，我们需要收集你的设备标识、操作日志等信息用于分析、优化应用性能。你可阅读
            <text class="link-text" @click="onServiceAgreement">《用户协议》</text>
            和
            <text class="link-text" @click="onPrivacyPolicy">《隐私政策》</text>
            了解详细信息。若你同意，请点击下方按钮开始接受我们的服务。
          </view>
        </view>
        <view style="height:1px;background:#eee;margin:24px 0 0 0;"></view>
        <view class="custom-modal-actions" style="gap:0;margin:0;padding:0;">
          <button class="custom-modal-btn left-btn" style="flex:1;border-radius:0 0 0 16px;border-right:1px solid #eee;border-top:none;" @click="onPrivacyReject">拒绝</button>
          <button class="custom-modal-btn right-btn" style="flex:1;border-radius:0 0 16px 0;border-left:1px solid #eee;border-top:none;" @click="onPrivacyConfirm">同意</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        { name: "首页", icon: "home" },
        { name: "搭配记录", icon: "heart" },
        { name: "幸运色", icon: "star" },
        { name: "我的", icon: "person" },
      ],
      currentTab: 0,
      currentColors: ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"],
      colorPalettes: [
        {
          name: "温暖秋日",
          colors: ["#D2691E", "#CD853F", "#DEB887", "#F4A460"],
        },
        {
          name: "清新春天",
          colors: ["#98FB98", "#90EE90", "#32CD32", "#228B22"],
        },
        {
          name: "浪漫粉色",
          colors: ["#FFB6C1", "#FFC0CB", "#FF69B4", "#FF1493"],
        },
        {
          name: "海洋蓝调",
          colors: ["#87CEEB", "#4682B4", "#1E90FF", "#0000CD"],
        },
        {
          name: "日落黄昏",
          colors: ["#FFD700", "#FFA500", "#FF8C00", "#FF4500"],
        },
        {
          name: "紫色梦幻",
          colors: ["#DDA0DD", "#DA70D6", "#BA55D3", "#9370DB"],
        },
      ],
      selectedPalette: 0,
      editingColor: "#FF6B6B",
      editingColorHex: "#FF6B6B",
      hue: 0,
      saturation: 70,
      lightness: 60,
      savedSchemes: [],
      isDarkMode: false,
      usageDays: 1,
      showPrivacyModal: false,
      luckyColor: {
        hex: "#FFD700",
        desc: "金色，象征着好运和财富，今天适合大胆尝试新事物！",
      },
    };
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      if (index === 2) {
        this.generateLuckyColor();
      }
    },
    selectPalette(index) {
      this.selectedPalette = index;
      this.currentColors = [...this.colorPalettes[index].colors];
      this.editingColor = this.currentColors[0];
      this.editingColorHex = this.currentColors[0];
      this.updateHSLFromHex(this.currentColors[0]);
    },
    hslToHex(h, s, l) {
      l /= 100;
      const a = (s * Math.min(l, 1 - l)) / 100;
      const f = (n) => {
        const k = (n + h / 30) % 12;
        const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
        return Math.round(255 * color)
          .toString(16)
          .padStart(2, "0");
      };
      return `#${f(0)}${f(8)}${f(4)}`;
    },
    hexToHsl(hex) {
      const r = parseInt(hex.slice(1, 3), 16) / 255;
      const g = parseInt(hex.slice(3, 5), 16) / 255;
      const b = parseInt(hex.slice(5, 7), 16) / 255;
      const max = Math.max(r, g, b);
      const min = Math.min(r, g, b);
      let h = 0;
      let s = 0;
      const l = (max + min) / 2;
      if (max !== min) {
        const d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch (max) {
          case r:
            h = (g - b) / d + (g < b ? 6 : 0);
            break;
          case g:
            h = (b - r) / d + 2;
            break;
          case b:
            h = (r - g) / d + 4;
            break;
        }
        h /= 6;
      }
      return [Math.round(h * 360), Math.round(s * 100), Math.round(l * 100)];
    },
    updateHSLFromHex(hexColor) {
      const [h, s, l] = this.hexToHsl(hexColor);
      this.hue = h;
      this.saturation = s;
      this.lightness = l;
    },
    updateHue(e) {
      this.hue = e.detail.value;
      this.updateColorFromHSL();
    },
    updateSaturation(e) {
      this.saturation = e.detail.value;
      this.updateColorFromHSL();
    },
    updateLightness(e) {
      this.lightness = e.detail.value;
      this.updateColorFromHSL();
    },
    updateColorFromHSL() {
      const newColor = this.hslToHex(this.hue, this.saturation, this.lightness);
      this.editingColor = newColor;
      this.editingColorHex = newColor;
      this.currentColors.splice(0, 1, newColor);
    },
    updateColorFromHex() {
      if (this.editingColorHex.match(/^#[0-9A-F]{6}$/i)) {
        this.editingColor = this.editingColorHex;
        this.currentColors.splice(0, 1, this.editingColorHex);
        this.updateHSLFromHex(this.editingColorHex);
      }
    },
    randomColors() {
      const newColors = [];
      for (let i = 0; i < 4; i++) {
        const randomHue = Math.floor(Math.random() * 360);
        const randomSat = Math.floor(Math.random() * 50) + 50;
        const randomLight = Math.floor(Math.random() * 40) + 40;
        newColors.push(this.hslToHex(randomHue, randomSat, randomLight));
      }
      this.currentColors = newColors;
      this.editingColor = newColors[0];
      this.editingColorHex = newColors[0];
      this.updateHSLFromHex(newColors[0]);
    },
    clearColors() {
      this.currentColors = ["#FFFFFF", "#FFFFFF", "#FFFFFF", "#FFFFFF"];
      this.editingColor = "#FFFFFF";
      this.editingColorHex = "#FFFFFF";
      this.hue = 0;
      this.saturation = 0;
      this.lightness = 100;
    },
    saveScheme() {
      const now = new Date();
      const scheme = {
        name: `配色方案 ${this.savedSchemes.length + 1}`,
        colors: [...this.currentColors],
        createTime: `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")} ${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`,
      };
      this.savedSchemes.unshift(scheme);
      this.saveToStorage();
      uni.showToast({
        title: "保存成功",
        icon: "success",
      });
    },
    loadScheme(scheme) {
      this.currentColors = [...scheme.colors];
      this.editingColor = scheme.colors[0];
      this.editingColorHex = scheme.colors[0];
      this.updateHSLFromHex(scheme.colors[0]);
      this.currentTab = 0;
      uni.showToast({
        title: "已加载配色方案",
        icon: "success",
      });
    },
    deleteScheme(index) {
      uni.showModal({
        title: "确认删除",
        content: "确定要删除这个配色方案吗？",
        success: (res) => {
          if (res.confirm) {
            this.savedSchemes.splice(index, 1);
            this.saveToStorage();
            uni.showToast({
              title: "删除成功",
              icon: "success",
            });
          }
        },
      });
    },
    toggleTheme() {
      this.isDarkMode = !this.isDarkMode;
      this.saveToStorage();
      uni.showToast({
        title: this.isDarkMode ? "已切换到暗色模式" : "已切换到明亮模式",
        icon: "success",
      });
    },
    clearCache() {
      uni.showModal({
        title: "确认清空",
        content: "清空缓存将删除所有保存的配色方案，确定继续吗？",
        success: (res) => {
          if (res.confirm) {
            this.savedSchemes = [];
            this.saveToStorage();
            uni.removeStorageSync('privacyPolicyShown666');
            uni.showToast({
              title: "缓存已清空",
              icon: "success",
            });
          }
        },
      });
    },
    showHelp() {
      // uni.showModal({
      //   title: "使用帮助",
      //   content:
      //     "1. 在首页选择调色板或自定义颜色\n2. 使用滑块调节色相、饱和度、明度\n3. 点击保存方案保存当前配色\n4. 在搭配记录中查看和管理已保存的方案",
      //   showCancel: false,
      // });
      uni.navigateTo({
        url: '/pages/index1',
      });
    },
    showAbout() {
      uni.navigateTo({
        url: '/pages/yinsi',
      });
    },
    showServiceAgreement() {
      uni.navigateTo({
        url: '/pages/xieyi',
      });
    },
    showPrivacyPolicyModal() {
      const shown = uni.getStorageSync('privacyPolicyShown666');
      if (!shown) {
        this.showPrivacyModal = true;
      }
    },
    onServiceAgreement() {
      // uni.setStorageSync('privacyPolicyShown666', true);
      this.showPrivacyModal = false;
      uni.navigateTo({
        url: '/pages/xieyi',
      });
    },
    onPrivacyPolicy() {
      // uni.setStorageSync('privacyPolicyShown666', true);
      this.showPrivacyModal = false;
      uni.navigateTo({
        url: '/pages/yinsi',
      });
    },
    onPrivacyConfirm() {
      uni.setStorageSync('privacyPolicyShown666', true);
      this.showPrivacyModal = false;
    },
    onPrivacyReject() {
      // 华为快应用退出方法
      if (typeof plus !== 'undefined' && plus.runtime && plus.runtime.quit) {
        plus.runtime.quit();
      } else if (typeof qh !== 'undefined' && qh.exit) {
        qh.exit(); // 兼容其他快应用平台
      } else {
        // 兜底：关闭页面或提示
        uni.showToast({ title: '请手动关闭应用', icon: 'none' });
      }
    },
    saveToStorage() {
      const data = {
        savedSchemes: this.savedSchemes,
        isDarkMode: this.isDarkMode,
        usageDays: this.usageDays,
      };
      uni.setStorageSync("bearColorData", data);
    },
    loadFromStorage() {
      try {
        const data = uni.getStorageSync("bearColorData");
        if (data) {
          this.savedSchemes = data.savedSchemes || [];
          this.isDarkMode = data.isDarkMode || false;
          this.usageDays = data.usageDays || 1;
        }
      } catch (e) {
        console.log("加载本地数据失败", e);
      }
    },
    generateLuckyColor() {
      // 每次点击都随机一个幸运色
      const luckyColors = [
        { hex: "#FFD700", desc: "金色，象征着好运和财富，今天适合大胆尝试新事物！" },
        { hex: "#4ECDC4", desc: "青绿色，带来清新和活力，适合开启新计划。" },
        { hex: "#FF6B6B", desc: "珊瑚红，充满热情，适合表达自我。" },
        { hex: "#45B7D1", desc: "天蓝色，平静理智，适合专注学习和工作。" },
        { hex: "#96CEB4", desc: "薄荷绿，舒缓心情，适合放松休息。" },
        { hex: "#FFA500", desc: "橙色，活力四射，适合社交和运动。" },
        { hex: "#9370DB", desc: "紫色，神秘优雅，适合思考和创作。" },
      ];
      let index = Math.floor(Math.random() * luckyColors.length);
      // 避免和当前 luckyColor 重复
      if (this.luckyColor && luckyColors[index].hex === this.luckyColor.hex && luckyColors.length > 1) {
        index = (index + 1) % luckyColors.length;
      }
      this.luckyColor = luckyColors[index];
    },
    generateLuckyScheme() {
      // 以幸运色为主色，生成一组和谐配色
      const baseColor = this.luckyColor.hex;
      // 简单算法：主色+3个随机色
      const randomColor = () => {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      };
      const scheme = [baseColor];
      while (scheme.length < 4) {
        const c = randomColor();
        if (!scheme.includes(c)) scheme.push(c);
      }
      this.currentColors = scheme;
      this.editingColor = scheme[0];
      this.editingColorHex = scheme[0];
      this.updateHSLFromHex(scheme[0]);
      this.currentTab = 0;
      uni.showToast({ title: '已生成幸运配色', icon: 'success' });
    },
  },
  onLoad() {
    this.loadFromStorage();
    this.selectPalette(0);
    // this.showPrivacyPolicyModal();
  },
  onShow() {
    this.showPrivacyPolicyModal();
  },
};
</script>

<style>
page {
  height: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f8f9fa;
}

/* 顶部导航栏 */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
  z-index: 1000;
}

.nav-title {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  /* margin-top: 88rpx; */
  margin-bottom: 120rpx;
  overflow: auto;
}

/* 首页样式 */
.home-page {
  padding: 32rpx;
  padding-top:10rpx;
}

.preview-section {
  margin-bottom: 32rpx;
}

.preview-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.color-preview {
  display: flex;
  height: 170rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-bottom: 24rpx;
}

.color-block {
  flex: 1;
  transition: all 0.3s ease;
}

.color-info {
  text-align: center;
}

.color-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 16rpx;
}

.color-values {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.color-value {
  font-size: 12px;
  color: #666666;
  background-color: #f5f5f5;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  margin: 4rpx;
}

/* 调色板区域 */
.palette-section {
  margin-bottom: 32rpx;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 16rpx;
}

.palette-scroll {
  overflow: auto;
}

.palette-list {
  display: flex;
  padding: 16rpx 0;
  padding-left: 20rpx;
}

.palette-item {
  flex-shrink: 0;
  width: 160rpx;
  margin-right: 24rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 16rpx;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.palette-item.active {
  border-color: #8b4513;
  transform: scale(1.05);
}

.palette-colors {
  display: flex;
  height: 60rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
}

.mini-color-block {
  flex: 1;
}

.palette-name {
  font-size: 12px;
  color: #666666;
}

/* 编辑器区域 */
.editor-section {
  margin-bottom: 32rpx;
}

.editor-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.current-color-display {
  display: flex;
  align-items: center;
  margin-bottom: 32rpx;
}

.current-color-block {
  width: 80rpx;
  height: 80rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  border: 2px solid #e5e5e5;
}

.color-input-group {
  flex: 1;
}

.color-label {
  font-size: 14px;
  color: #666666;
  display: block;
  margin-bottom: 8rpx;
}

.color-input {
  /* width: 100%; */
  height: 72rpx;
  border: 1px solid #e5e5e5;
  border-radius: 8rpx;
  padding: 0 16rpx;
  font-size: 14px;
  color: #333333;
}

.sliders {
  display: flex;
  flex-direction: column;
}

.slider-group {
  margin-bottom: 10rpx;
}

.slider-label {
  font-size: 14px;
  color: #666666;
  display: block;
  margin-bottom: 16rpx;
}

.color-slider {
  /* width: 100%; */
}

/* 操作栏 */
.action-bar {
  display: flex;
  justify-content: space-between;
  padding: 0 16rpx;
}

.action-btn {
  /* flex: 1; */
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
  margin: 0 8rpx;
  border: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.save-btn {
  background-color: #8b4513;
  color: #ffffff;
}

.random-btn {
  background-color: #fff8dc;
  color: #8b4513;
  border: 1px solid #8b4513;
}

.clear-btn {
  background-color: #f5f5f5;
  color: #666666;
}

/* .btn-text {
  margin-left: 8rpx;
} */

/* 搭配记录页面 */
.record-page {
  padding: 32rpx;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
}

.record-count {
  font-size: 14px;
  color: #666666;
}

.record-list {
  height: calc(100vh - 300rpx);
  overflow: auto;
}

.record-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
}

.record-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.record-item:active {
  transform: scale(0.98);
}

.record-colors {
  display: flex;
  height: 80rpx;
  border-radius: 8rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
}

.record-color-block {
  flex: 1;
}

.record-info {
  text-align: center;
}

.record-name {
  font-size: 14px;
  font-weight: 600;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

.record-time {
  font-size: 12px;
  color: #999999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400rpx;
  text-align: center;
}

.empty-text {
  font-size: 16px;
  color: #666666;
  margin: 24rpx 0 16rpx;
}

.empty-tip {
  font-size: 14px;
  color: #999999;
}

/* 我的页面 */
.profile-page {
  padding: 32rpx;
}

.profile-header {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 40rpx;
  text-align: center;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 16rpx;
}

.username {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
}

.profile-content {
  display: flex;
  flex-direction: column;
}

.stats-section {
  display: flex;
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.stat-item {
  flex: 1;
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: #8b4513;
  display: block;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 14px;
  color: #666666;
}

.menu-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1px solid #f5f5f5;
  transition: all 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: #f8f9fa;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-text {
  font-size: 16px;
  color: #333333;
  margin-left: 16rpx;
}

.menu-right {
  display: flex;
  align-items: center;
}

.menu-value {
  font-size: 14px;
  color: #666666;
  margin-right: 16rpx;
}

/* 底部标签栏 */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  border-top: 1px solid #e5e5e5;
  z-index: 1000;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 12px;
  color: #999999;
  margin-top: 8rpx;
  transition: all 0.3s ease;
}

.tab-text.active {
  color: #8b4513;
  font-weight: 600;
}

.lucky-page {
  padding: 32rpx;
  text-align: center;
}

.lucky-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32rpx;
}

.lucky-title {
  font-size: 20px;
  font-weight: 600;
  color: #333333;
  margin-top: 16rpx;
}

.lucky-color-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 32rpx;
}

.lucky-color-block {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.lucky-color-hex {
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 8rpx;
  display: block;
}

.lucky-color-desc {
  font-size: 16px;
  color: #666666;
  line-height: 1.6;
}

/* 优化幸运色按钮样式 */
.lucky-refresh-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(90deg, #FFD700 0%, #FFB347 100%);
  color: #fff;
  border-radius: 12rpx;
  border: none;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.15);
  letter-spacing: 2px;
  transition: all 0.2s;
}
.lucky-refresh-btn:active {
  opacity: 0.85;
}
.lucky-scheme-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(90deg, #4ECDC4 0%, #45B7D1 100%);
  color: #fff;
  border-radius: 12rpx;
  border: none;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  box-shadow: 0 4rpx 16rpx rgba(69, 183, 209, 0.12);
  letter-spacing: 2px;
  transition: all 0.2s;
}
.lucky-scheme-btn:active {
  opacity: 0.85;
}

.custom-modal-mask {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.custom-modal {
  width: 80vw;
  max-width: 340px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 24px 20px 12px 20px;
  text-align: center;
}
.custom-modal-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.custom-modal-content {
  font-size: 15px;
  color: #444;
  margin-bottom: 28px;
  line-height: 1.6;
  text-align: left;
}
.custom-modal-actions {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0 8px 8px 8px;
  justify-content: center;
}
.custom-modal-btn {
  min-width: 110px;
  height: 44px;
  font-size: 16px;
  border-radius: 24px;
  /* border: 2px solid #8b4513; */
  outline: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border 0.2s;
  margin: 0;
  box-sizing: border-box;
  font-weight: 600;
}
.left-btn {
  background: #fff;
  color: #8b4513;
  border: 2px solid #fff;
  margin-right: 0;
}
.right-btn {
  background: #8b4513;
  color: #fff;
  border: 2px solid #8b4513;
  margin-left: 0;
}
 .custom-modal-btn:active {
   opacity: 0.85;
 }
.link-text {
  color: #3478f6; /* 主题蓝色，突出显示可点击链接 */
  cursor: pointer;
  text-decoration: underline;
}
</style>
